<template>
    <div class="ckq_edit-div"
         v-html="innerText"
         :contenteditable="canEdit"
         @focus="isLocked = true"
         @blur="isLocked = false"
         @input="changeText" :style="style"
         id='bodyDiv'
         >
    </div>
</template>

<script>
    export default{
        name: 'ckq-editDiv',
        props: {
            value: {
                type: String,
                default: ''
            },
            canEdit: {
                type: Boolean,
                default: true
            },
            minHeight: {
                type: String,
                default: '0.5'
            },
        },
        data(){
            return {
                innerText: this.value,
                isLocked: false,
                style:{
                    'min-height':this.minHeight+'rem'
                }
            }
        },
        mounted () {
            this.onPasteFn();
        },
        watch: {
            'value'(news){
                if (!this.isLocked) {
                    this.innerText = this.value;
                }
                if(!news){
                   this.$el.innerText = this.value;
                }
            }
        },
        methods: {
            changeText(){
                this.$emit('input', this.$el.innerHTML);
            },
            onPasteFn(){
                var bodyDiv =  document.getElementById("bodyDiv");
                bodyDiv.addEventListener("paste", function(e){
               e.preventDefault();
                var text;
                var clp = (e.originalEvent || e).clipboardData;
                if (clp === undefined || clp === null) {
                    text = window.clipboardData.getData("text") || "";
                    if (text !== "") {
                        if (window.getSelection) {
                            var newNode = document.createElement("span");
                            newNode.innerHTML = text;
                            window.getSelection().getRangeAt(0).insertNode(newNode);
                        } else {
                            document.selection.createRange().pasteHTML(text);
                        }
                    }
                } else {
                    text = clp.getData('text/plain') || "";
                    if (text !== "") {
                        document.execCommand('insertText', false, text);
                    }
                }
                })
            },
        }
    }
</script>
<style type="text/css">
    .ckq_edit-div {
        width: 100%;
        height: 0.5rem;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
        overflow: auto;
        padding: 0 0.15rem;
    }
    .ckq_edit-div[contenteditable=true]{
         user-modify: read-write-plaintext-only;
    }
    .ckq_edit-div.edit-divempty:before {
         content: attr(placeholder);
         display: block;
         color: #ccc;
     }
</style>
